<template>
  <div ref="chartRef" :style="{ width: '100%', height: '400px' }"></div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref } from 'vue';
import axios from 'axios';

const chartRef = ref(null);
const option = ref({});

// 假设这是你的后端API地址
// const apiUrl = 'https://your-backend-api.com/data';

onMounted(async () => {
  try {
    const response = await axios.get('/api/echar');
    const chartData = response.data;
    // const { xAxisData, seriesData } = response.data;
    const xAxisData = chartData.map((item) => item.category);
    const seriesData = chartData.map((item) => item.value);
    option.value = {
      title: {
        text: '航班起降架次统计',
      },
      tooltip: {},
      xAxis: {
        data: xAxisData,
        axisLabel: {
          textStyle: {
            color: '#000',
          }
        }
      },
      yAxis: {
        axisLabel: {
          textStyle: {
            color: '#000',
          }
        }
      },
      series: [
        {
          type: 'line',
          data: seriesData,
          // smooth: true,
          label: {
            show: true,
            position: 'top',
            formatter:'{c}',
            textStyle:{
              color:'#000'
            }
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(0, 0, 255,0.6)'},
              { offset: 1, color: 'rgba(0, 0, 255, 0.6)'}
            ])
          },
        },
      ],
    };
    initChart();
  } catch (error) {
    console.error('Error fetching data:', error);
  }
});

const initChart = () => {
  const chartInstance = echarts.init(chartRef.value);
  chartInstance.setOption(option.value);
};
</script>